<template>
  <view class="deco-person-order-bar" :style="[innerStyle]">
    <!-- 对外渠道 -->
    <view v-if="channelType == 'outside'" class="flex flex-1 items-center justify-between bg-white px-24 py-30 radius-16" @click="handleToOrder('film')">
      <view class="flex items-center">
        <zm-icon size="46rpx" :name="useImage('/zuimei-film-oss/1.0.0/icons/coupon-icon.png')"></zm-icon>
        <text class="font-30 font-bold ml-10">影票订单</text>
      </view>
      <view class="flex items-center">
        <view v-if="count" class="tips-tag">{{ count }}部待放映</view>
        <zm-icon name="arrow" size="32rpx" color="#ccc" weight="bold"></zm-icon>
      </view>
    </view>
    <!-- 内部渠道 -->
    <view v-else class="flex flex-1 flex-col bg-white py-24 radius-16">
      <text class="font-32 font-700 px-20">我的订单</text>
      <view class="grid grid-cols-4 my-20">
        <view class="flex flex-col items-center" @click="handleToOrder('film')">
          <u-image width="74rpx" height="74rpx" :src="useImage('/zuimei-film-oss/1.0.0/icons/icon-dyp.png')"></u-image>
          <text class="text-333 mt-6">电影票</text>
        </view>
        <view class="flex flex-col items-center" @click="handleToOrder('goods')">
          <u-image width="74rpx" height="74rpx" :src="useImage('/zuimei-film-oss/1.0.0/icons/icon-xs.png')"></u-image>
          <text class="text-333 mt-6">小食/其他</text>
        </view>
        <view class="flex flex-col items-center" @click="handleToOrder('mall')">
          <u-image width="74rpx" height="74rpx" :src="useImage('/zuimei-film-oss/1.0.0/icons/icon-sp.png')"></u-image>
          <text class="text-333 mt-6">商品</text>
        </view>
        <view class="flex flex-col items-center" @click="handleToOrder('recharge')">
          <u-image width="74rpx" height="74rpx" :src="useImage('/zuimei-film-oss/1.0.0/icons/icon-cz.png')"></u-image>
          <text class="text-333 mt-6">充值</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import mixin from "@/decoration/mixins"
import { mapGetters } from "vuex"
export default {
  name: "deco-person-order-bar",
  mixins: [mixin],
  data() {
    return {
      count: 0
    }
  },
  computed: {
    ...mapGetters(["login", "userInfo", "personDeco"]),
    // 渠道类型
    channelType() {
      return this.personDeco?.config?.channelType
    }
  },
  watch: {
    login: {
      immediate: true,
      handler() {
        this.handleGetFilmCount()
      }
    }
  },
  mounted() {
    this.init()
    this.handleGetFilmCount()
  },
  methods: {
    init() {
      if (this.mitt) {
        this.mitt.on("refresh", () => {
          this.handleGetFilmCount()
        })
      }
    },
    // 跳转订单
    handleToOrder(type) {
      uni.$toView({
        url: "pages/order/order-list/order-list",
        login: true,
        params: { type }
      })
    },
    // 获取订单列表查询待放映数量
    async handleGetFilmCount() {
      this.count = 0
      const { list } = await uni.$api.orderFilm.getOrderList({ pageSize: 9999 }, { login: true })
      this.count = list.filter((item) => item.showStatus == 2).length
    }
  }
}
</script>

<style lang="scss" scoped>
.deco-person-order-bar {
  flex: 1;
  display: flex;
  align-items: center;
  .tips-tag {
    color: #fff;
    font-size: 22rpx;
    padding: 4rpx 14rpx;
    border-radius: 18rpx;
    background-color: var(--theme-color);
  }
}
</style>
